import 'package:flutter/material.dart';
import 'package:gold/app/user_provider.dart';
import 'package:gold/http/api_login.dart';
import 'package:gold/http/http.dart';
import 'package:gold/model/user_model.dart';
import 'package:gold/route/routes.dart';
import 'package:gold/route/xfg_nav.dart';
import 'package:gold/utils/res.dart';
import 'package:gold/utils/xfg_color.dart';
import 'package:gold/utils/xfg_size.dart';
import 'package:gold/widgets/common_widgets.dart';
import 'package:gold/widgets/http_image.dart';
import 'package:gold/widgets/xfg_text.dart';
import 'package:popover/popover.dart';
import 'package:provider/provider.dart';

/// @description: 完善个人信息页面
/// @author tangzhentao
/// @created at 21:11 2025/1/1

class ProfilePage extends StatelessWidget {
  const ProfilePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: xfgAppbar(title: '完善个人资料'),
      body: Builder(builder: (ctx) {
        final user = ctx.select<UserProvider, UserModel>((k) => k.user);
        return Column(
          children: [
            /// 头像信息
            Ink(
              height: XfgSize().size78,
              decoration: BoxDecoration(color: XfgColor.white, border: Border(top: singleBorderSide, bottom: singleBorderSide)),
              child: InkWell(
                onTap: () => XfgNav.pushNamed(Routes.settingsProfileAvatar),
                child: Row(
                  children: [
                    SizedBox(width: XfgSize().size16),
                    HttpImage(user.avatar, size: Size.square(XfgSize().size54), radius: BorderRadius.circular(XfgSize().size54), placeholder: Res.imagesAvatar),
                    const Spacer(),
                    XfgText('点击修改头像', fontSize: XfgSize().text16, color: XfgColor.text3),
                    SizedBox(width: XfgSize().size14),
                    Image.asset(Res.imagesArrowRight, width: XfgSize().size10, height: XfgSize().size16),
                    SizedBox(width: XfgSize().size16)
                  ],
                ),
              ),
            ),
            /// 头像信息
            Ink(
              height: XfgSize().size58,
              decoration: BoxDecoration(color: XfgColor.white, border: Border(bottom: singleBorderSide)),
              child: InkWell(
                onTap: () => XfgNav.pushNamed(Routes.settingsProfileName),
                child: Row(
                  children: [
                    SizedBox(width: XfgSize().size16),
                    XfgText('昵称', fontSize: XfgSize().text18, color: XfgColor.text1D),
                    const Spacer(),
                    XfgText(user.nickname?? '梦想家', fontSize: XfgSize().text16, color: XfgColor.text3),
                    SizedBox(width: XfgSize().size14),
                    Image.asset(Res.imagesArrowRight, width: XfgSize().size10, height: XfgSize().size16),
                    SizedBox(width: XfgSize().size16)
                  ],
                ),
              ),
            ),
            /// 头像信息
            Builder(builder: (ctx) => Ink(
              height: XfgSize().size58,
              decoration: BoxDecoration(color: XfgColor.white, border: Border(bottom: singleBorderSide)),
              child: InkWell(
                onTap: () => showPickSex(ctx, user.sex),
                child: Row(
                  children: [
                    SizedBox(width: XfgSize().size16),
                    XfgText('性别', fontSize: XfgSize().text18, color: XfgColor.text1D),
                    const Spacer(),
                    XfgText(user.sex == 'M' ? '男':(user.sex == 'F' ? '女':'未知'), fontSize: XfgSize().text16, color: XfgColor.text3),
                    Icon(Icons.unfold_more, size: XfgSize().size24, color: XfgColor.text3),
                    SizedBox(width: XfgSize().size16)
                  ],
                ),
              ),
            )),
            Expanded(child: Container(color: XfgColor.white))
          ],
        );
      }),
    );
  }

  /// 选择性别
  Future showPickSex(BuildContext ctx, String? sex) async {
    final result = await showPopover<String>(
        barrierColor: XfgColor.transparent,
        backgroundColor: XfgColor.white,
        radius: XfgSize().size10,
        transition: PopoverTransition.other,
        arrowDxOffset: XfgSize().screenWidth - XfgSize().size164,
        arrowDyOffset: -XfgSize().size32,
        arrowHeight: XfgSize().size36,
        width: XfgSize().size164,
        height: XfgSize().size105,
        context: ctx,
        bodyBuilder: (_) => Column(
          children: [
            _sexItemWidget('男', sex == 'M', onTap: () => XfgNav.pop('M')),
            _sexItemWidget('女', sex == 'F', onTap: () => XfgNav.pop('F')),
          ],
        )
    );
    if (result != null) {
      final profileResult = await Http().request<int>(ApiLogin.completeProfile,
          data: {'sex': result}, loadingText: '加载中...', successText: '修改成功~'
      );
      if (profileResult.success) {
        XfgNav.read<UserProvider>().updateProfile();
      }
    }
  }

  /// 性别通用布局
  Widget _sexItemWidget(String text, bool select, {GestureTapCallback? onTap}) => Expanded(
    child: Ink(
      color: select ? XfgColor.sexSelectedBg:null,
      child: InkWell(
        onTap: () {
          if (!select) {
            onTap?.call();
          }
        },
        child: Row(
          children: [
            SizedBox(width: XfgSize().size22),
            XfgText(text, color: select ? XfgColor.sexSelected:XfgColor.text3, fontSize: XfgSize().text16),
            const Spacer(),
            Visibility(visible: select, child: Icon(Icons.check, size: XfgSize().size16, color: XfgColor.sexSelected)),
            SizedBox(width: XfgSize().size22),
          ],
        ),
      ),
    ),
  );
}
